<!--
 * @Description: 页面配置
 * @Autor: WangYuan
 * @Date: 2021-09-22 17:33:51
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-01-18 16:10:43
-->
<template>
  <div class="p10">
    <config-item label="主题色">
      <div style="margin-top:15px">
        <el-color-picker
          v-model="themeColor"
          @change="changeColor"
        ></el-color-picker>
      </div>
    </config-item>
    <config-item label="背景色">
      <div style="margin-top:15px">
        <div>
          <el-radio v-model="radio" :label="1">纯色</el-radio>
          <el-radio v-model="radio" :label="2">渐变色 </el-radio>
          <el-tooltip
            class="item"
            effect="dark"
            content="例如：radial-gradient(ellipse 1500rpx 600rpx at 0% 0%, #338af9, #e0e9f7)"
            placement="top-start"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
        </div>
        <div style="margin-top:15px">
          <el-color-picker
            v-if="radio == 1"
            v-model="backgroundColor"
          ></el-color-picker>
          <el-input
            v-else
            v-model="backgroundColor"
            placeholder="请输入渐变色代码"
          ></el-input>
        </div>
      </div>
    </config-item>
    <config-item label="背景图">
      <upImg :fileInfo="backgroundUrl" />
    </config-item>
    <el-button size="small f-white bg-theme" @click="mallTemp"
      >选择模板</el-button
    >
  </div>
</template>

<script>
import upImg from "../basic/VolUploadUpgrade.vue";
export default {
  name: "PageConfig",
  components: {
    upImg
  },
  data() {
    return {
      radio: 1,
      project: {
        _id: "62690740d9f4912ae0f7d588",
        pages: [
          {
            id: "000000",
            name: "首页",
            home: true,
            componentList: [
              {
                component: "McSwiper",
                name: "广告轮播",
                icon: "ivu-icon-md-swap",
                list: [
                  {
                    id: "0001",
                    image:
                      "https://oss.i-town.cn/itown/202311221058175012990.jpg"
                  },
                  {
                    id: "0002",
                    image:
                      "https://oss.i-town.cn/itown/202311221058336102360.jpg"
                  },
                  {
                    id: "0003",
                    image:
                      "https://oss.i-town.cn/itown/202311221058529104360.jpg"
                  }
                ],
                attrs: {
                  model: "basis",
                  autoplay: true,
                  loop: true
                },
                styles: {
                  pagePadding: "0",
                  negativeMarginBottom: "0"
                },
                id: "1651050315JEeHVc"
              }
            ],
            themeColor: ""
          }
        ],
        name: "售票小程序",
        cover: "https://api.boss.i-town.cn/Upload/img/1639553326077.jpeg",
        config: {
          navigation: {
            label: "导航",
            styles: {
              background: "#fff"
            },
            list: [
              {
                id: "00001",
                icon: "icon-shop",
                text: "首页",
                jump: {
                  type: "custom",
                  id: "000000"
                }
              },
              {
                id: "00003",
                icon: "icon-sort",
                text: "分类",
                jump: {
                  type: "fixed",
                  id: "category"
                }
              },
              {
                id: "00004",
                icon: "icon-cart",
                text: "购物车",
                jump: {
                  type: "fixed",
                  id: "car"
                }
              },
              {
                id: "00005",
                icon: "icon-my",
                text: "我的",
                jump: {
                  type: "fixed",
                  id: "my"
                }
              }
            ]
          },
          goodsGroups: [
            {
              name: "新品上架",
              type: "0001",
              level: "1",
              child: []
            },
            {
              name: "热销排行",
              type: "0002",
              level: "1",
              child: []
            }
          ],
          listTpl: {
            model: "one",
            addIcon: "cart"
          },
          categoryTpl: {
            advertising: false
          },
          hotList: [],
          backgroundColor: "#FFFFFF",
          backgroundUrl: []
        },
        type: "mall",
        industry: "hotel",
        userId: "6269070fd9f4912ae0f7d583",
        logo: "https://api.boss.i-town.cn/Upload/img/1638500579691.png",
        id: "62690740d9f4912ae0f7d588"
      },
      backgroundUrl: [],
      backgroundColor: "", //背景色
      themeColor: "" //主图色
    };
  },
  watch: {
    backgroundUrl: {
      handler(n, o) {
        const a = n.filter(v => {
          return v.length;
        });
        this.$store.getters.data().pagecontrol.curPage.backgroundUrl = a;
      },
      deep: true
    },
    backgroundColor(n, o) {
      this.$store.getters.data().pagecontrol.curPage.backgroundColor = n;
    }
  },
  created() {
    if (
      this.$store.getters.data().pagecontrol.curPage.backgroundUrl != undefined &&
      this.$store.getters.data().pagecontrol.curPage.backgroundUrl.length
    ) {
      this.backgroundUrl = [
        this.$store.getters.data().pagecontrol.curPage.backgroundUrl
      ];
    } else {
      this.backgroundUrl = [];
    }
    if (this.$store.getters.data().pagecontrol.curPage.backgroundColor) {
      this.backgroundColor = this.$store.getters.data().pagecontrol.curPage.backgroundColor;
      if (this.backgroundColor.charAt(0) == "#") {
        this.radio = 1;
      } else {
        this.radio = 2;
      }
    } else {
      this.backgroundColor = "";
    }
  },
  methods: {
    mallTemp() {
      this.$router.push({ name: "MallStoretemplate" });
    },
    changeColor(v) {
      this.$store.getters.data().pagecontrol.curPage.themeColor = v;
    }
  }
};
</script>
